import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom'
import PersonalCenterContainer from './StyledPersonalCenter'

import Fanhui from 'images/nav/whiteback.png'
import touxiang from 'images/personalCenter/maidou.png'
import level3 from 'images/personalCenter/level3.png'


// 头部引入
import Navigation from './components/Navigation/Navigation'

//TitleBar引入
import TitleBar from './components/TitleBar/Titlebar'

//二级子页面任务、评价
import Renwu from './child/Renwu'
import Pingjia from './child/Pingjia'




const barArr = [
	{
		num: "22",
		title: "任务",
		routePath: "/myChildRouter/personalcenter/:id/renwu",
		component: Renwu,
		tag: 0,
	},
	{
		num: "38",
		title: "评价",
		routePath: "/myChildRouter/personalcenter/:id/pingjia",
		component: Pingjia,
		tag: 1,
	},]
let selBill = 0


class PersonalCenter extends Component {
	state = {}
	render() {

		barArr.forEach((value, index) => {
			console.log(value, index);

			if (value.routePath === this.props.location.pathname) {
				selBill = value.tag
			}
		})

		return (
			<PersonalCenterContainer>
				<Navigation
					backgroundColor='#56D9D1'
					leftImg={Fanhui}
					leftImgWidth='.2rem'
					leftImgHeight='.2rem'
					leftPadding='0 0 0 .095rem'
					clickLeft={() => this.onClickLeft("left")}
				>
				</Navigation>

				<div className="personal">
					<div className="personalInfo">

						<div className="touxiang">
							<img src={touxiang} className="touxiangImg" alt="" />
							<img src={level3} className="levelImg" alt="" />
						</div>

						<h3 className="userName">麦兜响当当</h3>

						<div className="content">
							<div className="haoping">
								<h4>好评</h4>
								<h5>100%</h5>
							</div>
							<div className="renwudan">
								<h4>任务单</h4>
								<h5>36</h5>
							</div>
						</div>

					</div>
				</div>

				<TitleBar
					barArr={barArr}
					taskIndex={selBill}
					numWidth='.61rem'
					numHeigh='.34rem'

					titleBorderWidth='0 0 5px 0'
					titleWidth='.61rem'
					titleHeigh='.40rem'
					selectedTitleBorderColor='#56D9D1'
					titleColor='#646464'
					titleSize='.13rem'
				></TitleBar>
				<Switch>
					{
						barArr.map((value, index) => (
							<Route key={index} path={value.routePath} component={value.component}></Route>
						))
					}
					<Redirect from="/myChildRouter/personalcenter/:id" to={barArr[selBill ? selBill : 0].routePath} exact></Redirect>
					{/* <Route component={Page404}></Route> */}
				</Switch>

			</PersonalCenterContainer>

		)
	}
	

	onClickLeft(tag) {
		this.props.history.go(-1)
	}
}

export default PersonalCenter